<template>
    <div>
        <div class="top">
            <div class="topLeft">
                <div class="title">标的物类型</div>
                <div class="desc">
                    <div class="item" v-for="item, index in bdlx" :key="index" @click="to1(item)">{{ item }}</div>
                    <router-link to="./lotType" class="item">更多></router-link>
                    <!-- <div class="item">更多</div> -->
                </div>
                <div class="title">标的物所在地</div>
                <div class="desc">
                    <div class="item" v-for="item, index in bdszd" :key="index" @click="to2(item)">{{ item }}</div>
                    <router-link to="./lotType" class="item">更多></router-link>
                    <!-- <div class="item">更多</div> -->
                </div>
            </div>

            <div class="topMiddle">
                <el-carousel height="300px">
                    <el-carousel-item v-for="item, index in cover" :key="index" >
                        <img :src="item.cover" style="height: 300px;" alt="加载失败" @click="to3(item.id)"/>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="topRight">
                <div class="noSession">
                    <div><i class="el-icon-s-custom photo"></i></div>
                    <el-button class="login" @click="login">登录</el-button>
                    <el-button class="login" @click="exist">退出</el-button>
                    <el-button class="register" @click="register">注册</el-button>

                    <div style="flex: 1;"></div>
                    <el-button class="checkIn" @click="assetAuction">资产拍卖登记</el-button>
                </div>
                <div class="char">
                    <div class="title">帮助中心</div>
                    <div class="text">
                        <div class="item" @click="to7">拍卖规则</div>
                        <div class="item" @click="to7">收费规则</div>
                        <div class="item" @click="to7">出价规则</div>
                        <div class="item" @click="to7">成交规则</div>
                        <div class="item" @click="to7">交保证金</div>
                        <div class="item" @click="to7">常见问题</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="middle">
            <div class="title">竞价流程</div>
            <el-steps :active="8" align-center @click="to5">
                <el-step v-for="item, index in process" :key="index"></el-step>
            </el-steps>
            <div class="outer" v-for="item, index in process" :key="index">
                <div class="inner" @click="to5">
                    {{ item.value }}
                </div>
            </div>
        </div>

        <div class="bottom">
            <div class="left">
                <div class="titleLeft">全部</div>
                <el-tabs class="tabs" @tab-click="handleClick">
                    <el-tab-pane class="button" label="房产">
                        <div class="item" v-for="(item, index) in lot" :key="index" @click="to6(item)">
                            <img v-if="item.fm" :src=" item.fm " alt="加载失败"/>
                            <div class="text">
                                <div class="name">{{ item.other }}</div>
                                <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                                <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="button" label="机动车">
                        <div class="item" v-for="(item, index ) in lot" :key="index" @click="to6(item)">
                            <img :src="item.sctp " alt="加载失败"/>
                            <div class="text">
                                <div class="name">{{ item.bdmc }}</div>
                                <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                                <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="button" label="土地">
                        <div class="item" v-for="(item, index ) in lot" :key="index" @click="to6(item)">
                            <img :src="item.sctp " alt="加载失败"/>
                            <div class="text">
                                <div class="name">{{ item.bdmc }}</div>
                                <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                                <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="button" label="其他财产">
                        <div class="item" v-for="(item, index ) in lot" :key="index" @click="to6(item)">
                            <img :src="item.sctp " alt="加载失败"/>
                            <div class="text">
                                <div class="name">{{ item.bdmc }}</div>
                                <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                                <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="button" label="工业循环物资">
                        <div class="item" v-for="(item, index ) in lot" :key="index" @click="to6(item)">
                            <img :src="item.sctp " alt="加载失败"/>
                            <div class="text">
                                <div class="name">{{ item.bdmc }}</div>
                                <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                                <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="button" label="无形资产">
                        <div class="item" v-for="(item, index ) in lot" :key="index" @click="to6(item)">
                            <img :src="item.sctp " alt="加载失败"/>
                            <div class="text">
                                <div class="name">{{ item.bdmc }}</div>
                                <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                                <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="button" label="农副产品">
                        <div class="item" v-for="(item, index ) in lot" :key="index" @click="to6(item)">
                            <img :src="item.sctp " alt="加载失败"/>
                            <div class="text">
                                <div class="name">{{ item.bdmc }}</div>
                                <div class="price">当前价<span style="font-weight: bold;">{{ item.blj }}</span>元(<span style="font-weight: bold;">0</span>次出价)</div>
                                <div class="time">报名截止时间：{{ item.bmjzsj }}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            
            <div class="right">
                <div class="titleRight">
                    <div class="title">拍卖公告</div>
                </div>
                <div style="border: 1px solid rgb(230, 230, 230); width: 90%; margin: 0 auto; margin-bottom: -10px;"></div>
                <div class="noticeList">
                    <div class="item" v-for="(item, index) in notice" :key="index" @click="to4(item)">
                        <span class="name">{{ item.pmggmc }}</span> 
                        <div style="flex: 1;"></div> 
                        <span class="time">{{ item.ggksrq }}</span>
                    </div>
                </div>
            </div>
        </div>
      
    </div>
  </template>
  
  <script>
  import {getAll,getBdszd,getCover,getProcess,getLot,getNotice} from '../../api/homePage/homePage';
  import { getData } from '@/api/data';
  import { removeToken } from '@/api/token';
  export default {
    name: 'homePage',
    components: {

    },
    data(){
        return{
            bdlx: [],
            bdszd:[],
            cover:[],
            process:[],
            lot: [],
            notice: [],
        }
    },
    methods:{
        getList(){
            getAll().then((res) => {
                if(res){
                    // console.log(res.data);
                    for(let i = 0; i < 7; i++){
                        this.bdlx.push(res.data[i].value);
                    }
                    // this.bdlx = res.data;
                }
            });
            getNotice().then((res) => {
                if(res){
                    console.log('notice',res.data);
                    for(let i = 0; i < res.data.length; i++){
                        this.notice.push(res.data[i]);
                    }
                }
            });
        },
        getBdszd(){
            getBdszd().then((res) => {
            if(res){
                // console.log(res);
                for(let i = 0; i < 7; i++){
                    this.bdszd.push(res.data[i].name);
                }
                // this.bdszd = res.data;
            }
            })
        },
        getCover(){
            getCover().then((res) => {
            if(res){
                console.log(res.data);
                this.cover = res.data;
            }
            })
        },
        getProcess(){
            let data = '竞拍流程';
            getData(data).then((res) => {
                if(res){
                    console.log(res.data);
                    this.process = res.data;
                }
            })
        },
        login(){
            this.$router.push({
                path: '/login'
            });
        },
        register(){
            this.$router.push({
                path: '/register'
            });
        },
        assetAuction(){
            this.$router.push({
                path: '/assetAuction'
            });
        },
        handleClick(tab){
            console.log(tab.label);
            this.lot = [];
            let data = 'bdlx=' + tab.label;
            getLot(data).then((res) => {
                if(res.data){
                    console.log('标的',res.data);
                    for(let i = 0; i < res.data.length; i++){
                        this.lot.push(res.data[i]);
                        this.lot[i].bmjzsj = this.formatTime(res.data[i].bmjzsj);
                    }
                    console.log(this.lot);
                }
            });
        },
        formatTime(time){
            var dateee = new Date(time).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
        },
        to1(item){
            // console.log(item);
            this.$router.push({
                path: '/lotType',
                query: {
                    bdlx: item
                }
            });
        },
        to2(item){
            // console.log(item);
            this.$router.push({
                path: '/lotType',
                query: {
                    bdszd: item
                }
            });
        },
        to3(id){
            this.$router.push({
                path: '/carousel',
                query: {
                    id: id,
                }
            });
        },
        to4(item){
            this.$router.push({
                path: '/notice',
                query: {
                    pmggbh: item.pmggbh,
                }
            });
        },
        to5(){
            this.$router.push({
                path: '/rules',
                query: {
                    name: '竞拍流程',
                    id: 5,
                    index: 2
                }
            });
        },
        to6(item){
            // console.log(item);
            this.$router.push({
                path: '/lot',
                query: {
                    bdbh: item.bdbh
                }
            });
        },
        to7(){
            this.$router.push({
                path: '/rules',
                query: {
                    name: '首页',
                    id: 3,
                    index: 0
                }
            });
        },
        exist(){
            removeToken();
            this.$router.push({
               path: '/login' 
            });
        }
    },
    //页面加载
    mounted(){
        this.getList();
        this.getBdszd();
        this.getCover();
        this.getProcess();
        this.handleClick({label: '房产'});
        // let data ='bdlx=房产'
        // getLot(data).then((res) => {
        //     if(res.data.length>=1){
        //         for(let i = 0; i < 6; i++){
        //             this.lot.push(res.data[i]);
        //             // this.lot[i].bmjzsj = this.formatTime(res.data[i].bmjzsj);
        //         }
        //         console.log(this.lot);
        //     }
        // });
    }
  }
  </script>
  
  <style lang="less" scoped>
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 100px;
        height: 300px;
        
    }
    .topLeft{
        width: 20%;
        // background-color: rgb(240, 240, 240);
        height: 300px;
        background-color: #fff;
        // border: 2px solid #3d40e5;
        border: 1px solid #eee;
        box-shadow: 0 0 1px #ddd;
        text-align: center;
    }
    .topLeft .title{
        /* background-color: aqua; */
        // text-align: left; 
        padding: 4% 0;
        /* font-weight: bold; */
        font-size: 18px;
        color: #444;
        margin: 20px 0 10px 0;
    }
    .topLeft .desc{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        /* font-weight: bold; */
        color: #444;
        /* word-break: break-all; */
    }
    .topLeft .desc .item{
        /* line-height: 66px; */
        margin: 2% 1%;
        width: 20%;
        overflow: hidden;
        white-space: nowrap;
        // text-overflow: ellipsis;
        font-size: 12px;
        cursor: pointer;
    }
    .topLeft .desc .item:active{
        /* line-height: 66px; */
        margin: 2% 1%;
        width: 20%;
        overflow: hidden;
        white-space: nowrap;
        // text-overflow: ellipsis;
        font-size: 12px;
        cursor: pointer;
        background-color: #3d40e5;
        color: #fff;
    }
    .topMiddle{
        width: 60%;
        margin: 0 10px;
        // background-color: rgba(250, 250, 250, 0.9);
        padding: 2px;
        
    }
    .el-carousel{
        box-shadow: 0 0 2px#ddd;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        // background-color: #99a9bf;
        text-align: center;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        // background-color: #d3dce6;
        text-align: center;
    }
    .topRight{
        width: 20%;
        // background-color: rgb(240, 240, 240);
        height: 300px;
        text-align: center;
        // border: 2px solid #3d40e5;
        border: 1px solid #eee;
        box-shadow: 0 0 1px #ddd;
    }

    .topRight .photo{
        // position: absolute;
        margin: 0 auto;
        margin-bottom: 20px;
        // bottom: 50px;
        // right: 100px;
        // width: 50px;
        // height: 50px;
        z-index: 999;
    }

    .topRight .noSession{
        // margin: 50px auto;
        // position: relative;
        // bottom: -70px;
        // background-color: rgb(240, 240, 240);
        margin-bottom: 10px;
        background-color: #fff;
        padding: 20px;
    }
    .topRight .noSession .login{
        // position: relative;
        // left: -50px;
        margin-bottom: 10px;
    }
    .topRight .noSession .register{
        // position: relative;
        // right: -50px;
    }
    .topRight .char{
        background-color: #fff;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .topRight .char .title{
        font-size: 18px;
        text-align: center;
        padding: 20px;
    }
    .topRight .char .text{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin: 50px auto 0 auto;
        flex-wrap: wrap;
        font-size: 12px;
        // width: 50%;
    }
    .topRight .char .text .item{
        width: 30%;
        margin: 4px 0;
        cursor: pointer;
    }
    .middle{
        // width: 100%;
        background-color: #fff;
        margin: 0 100px;
        margin-top: 50px;
        text-align: center;
    }
    .middle .title{
        margin: 2% 0;
        font-weight: bold;
        font-size: 22px;
    }
    .middle .outer{
        display: inline-block;
        // background-color: rgb(250, 250, 250);
    }
    .middle .outer .inner{
        padding: 10px;
        margin: 0 64px;
        color: #333;
        font-size: 14px;
        cursor: pointer;
    }
    .bottom{
        margin: 80px 100px 0 100px;
        display: flex;
        justify-content: space-between;
        text-align: center;
    }
    .bottom .left{
        display: flex; 
        background-color: #fff;
        // width: 80%;
        margin-right: 10px;
        flex: 1;
    }
    .bottom .left .titleLeft{
        margin-top: 12px;
        font-weight: bold;
        font-size: 18px;
        padding-left: 10px;
        
    }
    .bottom .left .tabs{
      //  width: 90%; 
        margin-left: 2%;
        padding-top: 2px;
        flex: 1;
        // display: flex;
    }
    .bottom .left .tabs .button{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .bottom .left .tabs .button .item{
        width: 28%;
        // border: 1px solid rgb(250, 250, 250);
        border: 1px solid #eee;
        box-shadow: 0 0 1px #eee;
        background-color: rgba(238,238,238,.3);
        padding: 4px;
        cursor: pointer;
        margin: 20px 0;
        margin-bottom: 0 !important;
    }
    .bottom .left .tabs .button .item img{
        width: 200px;
        height: 150px;
        padding: 10px;
    }
    .bottom .left .tabs .button .item .text .name{
        font-weight: bold;
    }
    .bottom .left .tabs .button .item .text .price{
        font-size: 12px;
    }
    .bottom .left .tabs .button .item .text .time{
        font-size: 12px;
        // font-weight: bold;
    }
    .bottom .right{
        background-color: #fff;
        border: 1px solid #eee;
        box-shadow: 0 0 1px #ddd;
    }
    .bottom .right .titleRight{
        // margin: 1%; 
        display: flex;
        // width: 300px;
        justify-items: flex-start;
    }
    .bottom .right .titleRight .title{
        font-weight: bold;
        margin-top: 12px;
        font-size: 18px;
        padding-left: 10px;
        margin-bottom: 2%;
    }
    // .bottom .right .titleRight .more{
    //     font-size: 12px;
    // }
    .bottom .right .noticeList{
        margin-top: 5%; 
        text-align: left;
        // border: 1px solid #fff;
        // padding: 20px;
        // width: 40%; 
    }
    .bottom .right .noticeList .item{
        padding: 10px 20px;
        width: 300px;
        display: flex;
        cursor: pointer;
    }
    .bottom .right .noticeList .item .name{
        // font-weight: bold; 
        width: 160px;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #444;
    }
    .bottom .right .noticeList .item .time{
        font-size: 10px;
        color: #999;
    }
    /deep/ .el-tabs__header{
        margin-bottom: 0;
    }
  </style>
  